<template>
  <van-popup
    v-model="open"
    round
    closeable
    :close-on-click-overlay="false"
    position="bottom"
    :style="{ height: '60%' }"
  >
    <div class="title">输入物流信息</div>
    <van-form @submit="onSubmit" ref="formData">
      <van-field
        v-model="formData.emsName"
        name="emsName"
        label="快递公司"
        placeholder="快递公司"
        input-align="right"
        :rules="[{ required: true, message: '快递公司' }]"
      />
      <van-field
        v-model="formData.emsNo"
        name="emsNo"
        label="快递单号"
        placeholder="快递单号"
        input-align="right"
        :rules="[{ required: true, message: '快递单号' }]"
      />
      <van-button>确定</van-button>
    </van-form>
    
  </van-popup>
</template>
<script>
import { Popup, Form, Field, Button,Toast } from "vant";
import { goodsOrderEMS } from "@/api/orderManagement";
export default {
  components: {
    [Popup.name]: Popup,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
  },
  data() {
    return {
      open: false,
      formData: {
        emsName: "",
        emsNo: "",
        orderNo: "",
      },
    };
  },
  methods: {
    show(item) {
      this.formData.orderNo = item.orderNo;
      this.formData.emsNo = "";
      this.open = true;
    },
    onSubmit(values) {
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "提交中...",
      });
      goodsOrderEMS(this.formData).then((res) => {
        if (res.data.resultStatus) {
          this.$emit("load");
          this.open = false;
          Toast.success(res.data.errorMessage);
        } else {
          Toast.fail(res.data.errorMessage);
        }
        const timer = setInterval(() => {
          clearInterval(timer);
          Toast.clear();
        }, 1000);
      });
      console.log("submit", values);
    },
  },
};
</script>
<style lang="less" scoped>
.title {
  padding: 17px 0;
  font-size: 18px;
  text-align: center;
  line-height: 22px;
  text-align: center;
  color: #333333;
  font-weight: bold;
}
.van-form {
  padding: 0 17px;
  .name {
    padding: 13px 0;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  .van-field {
    margin-bottom: 18px;
    padding: 13px 0;
    height: 20px;
    line-height: 20px;
    box-sizing: content-box;
    /deep/ .van-field__error-message {
      display: none;
    }
    /deep/.van-cell__right-icon {
      line-height: 20px;
      height: 20px;
    }
    &:after {
      left: 0;
      right: 0;
    }
  }
  .van-button {
    display: block;
    margin: 90px auto 0 auto;
    width: 125px;
    height: 46px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    background: #333333;
    border-radius: 23px;
  }
}
</style>